<template>
  <nav-bar class="nav-bar">
    <div slot="left" @click="backClick">
      <span>←</span>
    </div>
    <div slot="center" class="title">
      <span
        class="title-item"
        :class="{ active: index == currentIndex }"
        v-for="(item, index) in title"
        :key="item"
        @click="titleClick(index)"
      >
        {{ item }}
      </span>
    </div>
  </nav-bar>
</template>

<script>
import NavBar from "components/commom/navbar/NavBar";

export default {
  data() {
    return {
      title: ["商品", "参数", "评论", "推荐"],
      currentIndex: 0, // 定义一个变量currentIndex，确定哪个item加样式，默认第一个item
    };
  },
  components: {
    NavBar,
  },
  methods: {
    backClick() {
      // 通过路由返回上页
      this.$router.back();
    },
    titleClick(index) {
      // 点击item时候获取到它的index，并把值赋给currentIndex变量（完成当前点击的item加样式）
      this.currentIndex = index;
      this.$emit("titleClick", index);
    },
  },
};
</script>

<style scoped lang='less'>
.nav-bar {
  background: #fff;
  border-bottom: 1px solid #ddd;
}
.title {
  display: flex;
  .title-item {
    flex: 1;
    color: #555;
    font-size: 16px;
    height: 44px;
  }
  .active {
    color: orangered;
  }
}
</style>

